<template>
  <div class="heard-box" v-if="props.info">
    <t-image-viewer v-model:index="viewerIndex" v-model:visible="visible" :images="urlList1"> </t-image-viewer>
    <div class="heard-left">
      <div class="left-top" @click="open">
        <a
          class="Icon-3d"
          :style="{
            backgroundImage: `url(${ImgUrlCancat + '/template/template53Dicon' + store.styleInfo.colorType + '.png'})`,
          }"
          target="blank"
          :href="info.externalUrl"
          v-if="info.externalUrl"
        >
        </a>
        <div class="left-arrow-img" @click.stop="addCurrent(1)">
          <arrowLeft iconSize="32px" color="#fff" />
        </div>
        <div class="left-arrow-img1" @click.stop="addCurrent(2)">
          <arrowRight iconSize="32px" color="#fff" />
        </div>

        <imgList :infoList="urlList" :imgUrl="imgUrl" @setCoverUrl="setCoverUrl" />

        <div
          class="left-top-shadow"
          :style="{ backgroundColor: colorList5[store.styleInfo.colorType - 1].shmentColor }"
        ></div>
        <t-image
          :style="{ backgroundColor: colorList5[store.styleInfo.colorType - 1].background }"
          class="left-top-img"
          fit="contain"
          position="center"
          :src="$filters.getLinkUrl(imgUrl, '?imageView2/3/w/560/format/webp')"
          alt=""
        />
      </div>
      <addparison @emitAddInfo="emitAddInfo" :color="colorList5[store.styleInfo.colorType - 1].fontColor" />
    </div>
    <div class="heard-right">
      <div class="right-item-level">
        <span>{{ props.info.name }}</span>
      </div>
      <!-- 展品类型 -->
      <div class="right-item">
        <span class="item-title1" :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }">展品类型</span
        ><span class="item-title2" :style="{ fontFamily: store.styleInfo.fontFamily }">{{
          props.info.typeValue ? props.info.typeValue : '--'
        }}</span>
      </div>
      <!-- 展品来源 -->
      <div class="right-item">
        <span class="item-title1" :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }">展品来源</span
        ><span class="item-title2" :style="{ fontFamily: store.styleInfo.fontFamily }">{{
          props.info.sourceValue ? props.info.sourceValue : '--'
        }}</span>
      </div>
      <!-- 所属年代 -->
      <div class="right-item">
        <span class="item-title1" :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }">所属年代</span
        ><span class="item-title2" :style="{ fontFamily: store.styleInfo.fontFamily }">{{
          props.info.ageIds ? props.info.ageIds : '--'
        }}</span>
      </div>
      <!-- 收藏单位 -->
      <div class="right-item">
        <span class="item-title1" :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }">收藏单位</span
        ><span class="item-title2" :style="{ fontFamily: store.styleInfo.fontFamily }">{{
          props.info.companyName ? props.info.companyName : '--'
        }}</span>
      </div>
      <!-- 展品质地 -->
      <div class="right-item">
        <span class="item-title1" :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }">展品质地</span
        ><span class="item-title2" :style="{ fontFamily: store.styleInfo.fontFamily }">{{
          props.info.texture ? props.info.texture : '--'
        }}</span>
      </div>
      <!-- 展品尺寸 -->
      <div class="right-item">
        <span class="item-title1" :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }">展品尺寸</span
        ><span class="item-title2" :style="{ fontFamily: store.styleInfo.fontFamily }">{{
          props.info.size ? props.info.size : '--'
        }}</span>
      </div>
      <div class="right-item">
        <span class="item-title1" :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }"
          >展品等级</span
        >
        <span class="item-title2"> {{ props.info.levelValue ? props.info.levelValue : '--' }} </span>
      </div>
      <div class="btn-box" id="template3-box" :class="'btn-box-style' + store.styleInfo.colorType">
        <t-popup
          @click="addFollow"
          v-if="props.info.openStatus === 1"
          attach="#template3-box"
          overlayClassName="popup"
          class="placement bottom center"
          content="将此展品添加到我的展览"
          placement="bottom"
          showArrow
          destroyOnClose
        >
          <div
            @click="addFollow"
            v-if="props.info.openStatus === 1"
            class="add-btn1"
            :style="{ borderColor: colorList5[store.styleInfo.colorType - 1].auxiliaryColor }"
          >
            <i
              class="iconfonts"
              :style="{ color: colorList5[store.styleInfo.colorType - 1].auxiliaryColor }"
              v-if="props.info.isFollow"
              >&#xe6a9;</i
            >
            <i class="iconfonts" :style="{ color: colorList5[store.styleInfo.colorType - 1].auxiliaryColor }" v-else
              >&#xe6aa;</i
            >
            <!-- <t-icon name="add" size="20" :color="colorList5[store.styleInfo.colorType - 1].auxiliaryColor"></t-icon> -->
          </div>
        </t-popup>
        <div class="add-btn1" :style="{ borderColor: colorList5[store.styleInfo.colorType - 1].auxiliaryColor }">
          <t-popup content="" placement="bottom">
            <template #content>
              <shear @shearType="shearType" />
            </template>
            <i
              class="iconfonts"
              :style="{ fontSize: '24px', color: colorList5[store.styleInfo.colorType - 1].auxiliaryColor }"
              >&#xe698;</i
            >
          </t-popup>
        </div>
        <t-popup
          @click="addFollow"
          v-if="props.info.openStatus === 1"
          attach="#template3-box"
          overlayClassName="popup"
          class="placement top center"
          content="将此展品添加到我的展览"
          placement="left"
          showArrow
          destroyOnClose
        >
          <div
            v-if="props.info.openStatus === 1"
            class="add-btn"
            @click="addId"
            :style="{ background: colorList5[store.styleInfo.colorType - 1].auxiliaryColor }"
          >
            <i class="doorIcon" :style="{ color: colorList5[store.styleInfo.colorType - 1].background }">&#xe64e;</i>
            <span :style="{ color: colorList5[store.styleInfo.colorType - 1].background }">添加至我的展览</span>
            <!-- <t-icon name="star" v-if="!props.info.isFollow" style="margin-right: 10px"></t-icon>
          <span>{{ props.info.isFollow ? '取消关注' : '添加至关注' }}</span> -->
          </div>
        </t-popup>
      </div>
      <div class="btm-arrow">
        <div class="arrow-item" @click.stop="stepNext(1)">
          <div class="arrow-img">
            <arrowLeft iconSize="32px" :color="colorList5[store.styleInfo.colorType - 1].auxiliaryColor" />
          </div>
          <span :style="{ color: colorList5[store.styleInfo.colorType - 1].auxiliaryColor }">上一个展品</span>
        </div>
        <div class="arrow-item" @click.stop="stepNext(2)">
          <span :style="{ color: colorList5[store.styleInfo.colorType - 1].auxiliaryColor }">下一个展品</span>
          <div class="arrow-img">
            <arrowRight iconSize="32px" :color="colorList5[store.styleInfo.colorType - 1].auxiliaryColor" />
          </div>
        </div>
      </div>
    </div>
    <div class="select-box">
      <t-dialog
        header="添加展品至展览"
        :visible="visibleStep"
        :confirm-on-enter="true"
        :on-cancel="closetables"
        :on-close="closetables"
        :cancelBtn="null"
        :confirmBtn="null"
      >
        <template #body>
          <t-row :gutter="16" style="width: 100%">
            <t-col :span="12">
              <div class="hw-dialog-box">
                <span class="titles">请选择展览:</span>
                <div class="hw-dialog-box-select">
                  <t-select v-model="projectId" placeholder="请选择展览">
                    <t-option :key="item.id" :label="item.name" :value="item.id" v-for="item in selectList" />
                  </t-select>
                </div>
              </div>
            </t-col>
          </t-row>
        </template>
        <template #footer>
          <t-button @click="visibleStep = false" theme="default" variant="outline">取消</t-button>
          <t-button @click="okStep">确定</t-button>
        </template>
      </t-dialog>
    </div>
  </div>
  <messageModel
    submitText="前往"
    title="提示"
    :visible="visibleMessage1"
    problem="您暂未登录"
    message="是否前往登录？"
    @closeClick="closeClick"
    @submitClick="pathSubmitClick"
  />
</template>

<script setup lang="ts">
// @ts-nocheck
import { ImgUrlCancat } from '@/utils/minxin';
import { outLogin } from '@/utils/minxin';
import messageModel from '@/components/messageModel/index.vue';
import { getHeardToken } from '@/api/utils';
import addparison from '../../components/comparison/addparison.vue';
import imgList from './imgList.vue';
import arrowLeft from '../../components/arrowLeft.vue';
import arrowRight from '../../components/arrowRight.vue';
import { computed, ref, watch } from 'vue';
import { colorList5 } from '../../../data';
import { projectLists } from '@/api/project/project';
import { designList, exhibtNumber, addExhibits } from '@/api/desgin/desgin';
import { MessagePlugin } from 'tdesign-vue-next';
import { toQQzone, toQQ, toWeibo, toWechat } from '@/utils/shear';
import shear from '@/components/shear/shear.vue';
import { urls } from '@/utils/request/upload';
import starInfo from '@/components/infoStar/infoStar.vue';
import { useProjectStore, getExhibitStore } from '@/store';

const store = useProjectStore();
const storeExhibit = getExhibitStore();
const emit = defineEmits(['followCompany', 'follow', 'stepExhibit']);
const projectId = ref(null);
const viewerIndex = ref(0);
const urlList = ref([]);
const visibleMessage1 = ref(false);
const loading = ref(false);
const visible = ref(false);
const selectList = ref([]);
const imgUrl = ref('');
const visibleStep = ref(false);
const props = defineProps({
  info: {
    type: Object,
  },
});
const cruuent = ref(0);
const getImgurl = (e: any) => {
  if (e.indexOf('https://') !== -1) {
    return e;
  } else {
    return urls + e;
  }
};
const closeClick = () => {
  //取消
  visibleMessage1.value = false;
};
const pathSubmitClick = () => {
  //确认登陆

  visibleMessage1.value = false;
  let url = window.location.href;
  let redirectUrl = 'http://jiyi.show/#/login?redirect=' + url;
  outLogin(redirectUrl);
};
const emitAddInfo = () => {
  storeExhibit.pushExhibitInfo(props.info);
};
const urlList1 = ref([]);
const initInfo = () => {
  urlList.value = [];
  urlList.value.push(props.info.coverUrl);
  if (props.info.images.length > 0) {
    // imgUrl.value = props.info.images[0].data;
    props.info.images.forEach((element) => {
      urlList.value.push(element.data);
    });
  }
  imgUrl.value = props.info.coverUrl;
  urlList1.value = urlList.value.map((element) => {
    console.log(getImgurl(element));
    return getImgurl(element);
  });
  console.log(urlList1.value, 'urlList', urlList.value);
};
// const urlList1 = computed(() => {
//   return urlList.value.forEach((element) => {
//     return getImgurl(element);
//   });
// });
// const getUrl = () => {
//   urlList1.value = urlList.value.forEach((element) => {
//    return getImgurl(element);
//   });
//   console.log(urlList1.value, 'urlList');
// };
const setCoverUrl = (e: string, index: number) => {
  imgUrl.value = e;
  viewerIndex.value = index;
};
const addCurrent = (type: number) => {
  if (type === 1) {
    let index = urlList.value.findIndex((el) => {
      return el == imgUrl.value;
    });
    if (index == 0) {
      return;
    } else {
      imgUrl.value = urlList.value[index - 1];
      viewerIndex.value = index - 1;
    }
  } else {
    let index = urlList.value.findIndex((el) => {
      return el == imgUrl.value;
    });
    if (index < urlList.value.length - 1) {
      imgUrl.value = urlList.value[index + 1];
      viewerIndex.value = index + 1;
      return;
    } else {
      return;
    }
  }
};
initInfo();
watch(
  () => props.info,
  () => {
    initInfo();
  },
  { deep: true },
);
const putCruuent = (type: number, index: Number) => {
  if (type == 1 && cruuent.value !== 0) {
    cruuent.value = cruuent.value - 1;
  } else if (type === 2 && cruuent.value !== props.info.images.length - 1) {
    cruuent.value = cruuent.value + 1;
  }

  console.log(`scroll-child-${cruuent.value}`);
  let ele = document.getElementById(`scroll-child-${cruuent.value}`);
  ele.scrollIntoView({ behavior: 'smooth', block: 'center' });
  imgUrl.value = props.info.images[cruuent.value].data;
  // ele.scrollIntoView();
};
const stepNext = (e: number) => {
  emit('stepExhibit', e);
};
const open = () => {
  // let num = urlList.value.findIndex((el) => {
  //   let arr = getImgurl(imgUrl.value);
  //   return el == arr;
  // });
  // viewerIndex.value = num;
  visible.value = true;
};

const handleKeyDown = (event) => {
  console.log(event.keyCode, '222222222222');

  if (event.keyCode >= 37 && event.keyCode <= 40) {
    event.preventDefault(); // 阻止默认的方向键行为
  }
};
window.addEventListener('keydown', handleKeyDown);
const lookIndex = (e: number) => {
  cruuent.value = e;
  let ele = document.getElementById(`scroll-child-${cruuent.value}`);
  ele.scrollIntoView({ behavior: 'smooth', block: 'center' });
  imgUrl.value = props.info.images[cruuent.value].data;
};
const closetables = (context?: any): void => {
  visibleStep.value = false;
};
const addFollow = () => {
  let token = getHeardToken();
  if (!token) {
    visibleMessage1.value = true;
    return;
  }
  emit('follow');
};
const selectInit = async (type: number) => {
  //获取账号项目
  try {
    let res = await projectLists(props.info.id);
    if (res.data.length > 0) {
      selectList.value = res.data;
      visibleStep.value = true;
    } else MessagePlugin.warning('暂无可添加的展览');
  } catch (err) {
    console.log(err);
  }
};
const addId = () => {
  let token = getHeardToken();
  if (!token) {
    visibleMessage1.value = true;
    return;
  }
  selectInit();
};
const shearType = (e: number) => {
  //分享
  let url = window.location.href;
  let title = props.info.name;
  switch (e) {
    case 1:
      toQQzone(url, title);
      break;
    case 2:
      toQQ(url, title);
      break;
    case 3:
      toWeibo(url, title);
      break;
    default:
      toWechat(url, title);
      break;
  }
};

const okStep = async () => {
  //添加项目
  try {
    if (loading.value) {
      return;
    }
    if (projectId.value) {
      loading.value = true;
      let res = await addExhibits(projectId.value, props.info.id, [props.info.id]);
      //////console.log(res.data);

      if (res.data) {
        MessagePlugin.success('添加成功');
        visibleStep.value = false;
        projectId.value = null;
      } else {
        // MessagePlugin.success('该展品已存在展品库');
        visibleStep.value = false;
      }
      // selectInit();
      loading.value = false;
    } else {
      MessagePlugin.success('请选择展览');
      return;
    }
  } catch {
    loading.value = false;
  }
};
</script>

<style lang="less" scoped>
.copyright-box {
  //   padding: 50px 130px;
}
.t-row {
  margin: 0;
}
.heard-box {
  display: flex;
  width: 1180px;
  margin: 0 auto;
  margin-bottom: 80px;
}
.heard-left {
  position: relative;
  width: 560px;
  height: 620px;
  display: flex;
  flex-direction: column;
}
.left-top {
  position: relative;
  width: 560px;
  height: 560px;
  .left-top-img {
    width: 560px;
    height: 560px;
    background: #fff;
  }
}
.Icon-3d {
  display: flex;
  cursor: pointer;
  position: absolute;
  top: -2px;
  right: 24px;
  width: 40px;
  height: 52px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 30;
}
.heard-left:hover {
  :deep(.left-imageList-box) {
    position: absolute;
    bottom: 20px;
    left: 0;
  }
  :deep(.list-item-box) {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    width: 56px;
    border-radius: 8px;
    background: transparent !important;
  }
  :deep(.list-item-child-img) {
    display: flex;
  }
}
.left-arrow-img {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 256px;
  left: 16px;
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 24px;
  z-index: 10;
}
.left-arrow-img1 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 256px;
  right: 16px;
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 24px;
  z-index: 10;
}
.left-top-shadow {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 380px;
  height: 380px;
}
.left-top-search {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 99;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  .left-top-search-icon {
    width: 20px;
    height: 20px;
    color: #ffffff;
  }
}
.heard-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 40px;
}
.right-item {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 16px;
}
.item-title1 {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 32px;
  width: 56px;
}
.item-title2 {
  display: flex;
  flex: 1;
  font-size: 17px;
  font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
  font-weight: 500;
  color: #fff;
  line-height: 32px;
  margin-left: 16px;
}
.right-item-level {
  font-size: 28px;
  font-family: SourceHanSerifCN-Bold, SourceHanSerifCN;
  font-weight: bold;
  color: #ffffff;
  line-height: 42px;
  img {
    width: 72px;
    height: 20px;
    margin-left: 18px;
  }
  margin-bottom: 50px;
}
.btn-box {
  display: flex;
  margin-top: 45px;
}
.add-btn {
  flex: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  background: #cfbda8;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 24px;
  .doorIcon {
    font-size: 18px;
    margin-right: 8px;
  }
  img {
    width: 40px;
    height: 40px;
    // margin-left: 6px;
  }
}
.add-btn1 {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid #cfbda8;
  margin-right: 12px;
  .doorIcon {
    font-size: 18px;
  }
  .iconfonts {
    font-size: 18px;
  }
  img {
    width: 24px;
    height: 24px;
  }
}
.left-btm {
  position: absolute;
  z-index: 99;
  bottom: 0;
  left: 0;
  display: flex;
  margin-top: 12px;
}
.left-btm-chevron {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 88px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 3px;
}
.left-content {
  display: flex;
  flex: 1;
  height: 100px;
  margin: 0 12px;
  margin-left: 0;
  overflow: hidden;
  overflow-x: auto;
  // overflow-y: hidden;
}
.scroll-item {
  cursor: pointer;
  position: relative;
  width: 100px;
  height: 100px;
  padding: 1px;
  border: 1px solid transparent;
  margin-right: 12px;
  .scroll-item-img {
    width: 100px;
    height: 100px;
  }
}
.img-shadow {
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  z-index: 999;
  background: rgba(255, 255, 255, 0.4);
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 24px;
}
.scroll-item:hover {
  .img-shadow {
    display: none;
  }
}
.img-active {
  .img-shadow {
    display: none;
  }
}
.select-box {
  :deep(.t-dialog) {
    width: 520px;
    // min-width: 1150px;
  }
  :deep(.t-popup) {
    z-index: 99999;
  }
}
.hw-dialog-box {
  display: flex;
  align-items: center;
  span {
    width: 100px;
  }
  .hw-dialog-box-select {
    flex: 1;
  }
}
.titles {
  font-size: 16px;
}
.arrow-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  span {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 32px;
    margin: 0 8px;
  }
}
.arrow-img {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btm-arrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 50px;
}
#template3-box {
  :deep(.t-popup__content) {
    // background-color: #333;
    // color: #fff;
    // border-color: #333;
    // box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    width: 200px;
  }
  :deep(.placement) {
    // border-color: #333;
    background: transparent;
  }
  :deep(.t-popup[data-popper-placement^='left'] .t-popup__arrow::before) {
    background-color: #333;
    border-color: #333;
  }
  :deep(.t-popup__content) {
    box-shadow: none;
    text-align: center;
  }
  :deep(.t-popup__arrow) {
    display: none !important;
  }
}
.btn-box-style1 {
  :deep(.t-popup__content) {
    background: #c79f6b !important;
    color: #662924;
  }
}
.btn-box-style2 {
  :deep(.t-popup__content) {
    background: #cbb995 !important;
    color: #443c2e;
  }
}
.btn-box-style3 {
  :deep(.t-popup__content) {
    background: #afa794 !important;
    color: #1b1d24;
  }
}
</style>
